<script type="text/javascript" charset="utf-8">
    function nl2br(str) {
        return str.replace("\\n", "<br/>");
    }
    function publishComment() {
        if ($("#new_comment").val().length < 3) {
            return false;
        }

        $.post($("#comment_form").attr("action"), $("#comment_form").serialize(),
            function(data) {
                var firstComment = $("#social_list").children(":first");
                if (firstComment.hasClass("comments pair")) {
                    var parity = "impair";
                } else {
                    var parity = "pair";
                }
                var newLi = $("<li></li>").prependTo("#social_list").hide();
                newLi.prepend("<p class=\"signature " + parity + "\">" + nl2br(data.username) + "</p>");
                newLi.prepend("<p class=\"comments " + parity + "\">" + nl2br(data.comment) + "</p>");
                newLi.fadeIn();
            });
            return false;
    }

    $(document).ready(function() {
        $("#post_comment").click(publishComment);
    });
</script>
<?php
    echo $this->publishForm;
    $i = 0;
?>
<ul id="social_list">
<?php
    foreach ($this->comments as $comment) {
        $parity = ($i % 2) ? "impair" : "pair";
        echo '<li class="comment">';
        echo "<p class=\"comments $parity\">" . nl2br($comment->content()) . "</p>";
        echo "<p class=\"signature $parity\">" . $comment->user()->login() . "</p>";
        echo '</li>';
        $i++;
    }
?>
</ul>